Jetpack compose View

介紹一些View的創建方式以及按鈕的監聽事件。

背景顏色

Surface(color = MaterialTheme.colors.primaryVariant) {
     Text("Hello", color = MaterialTheme.colors.secondary)
}

間隔

Spacer(Modifier.preferredHeight(16.dp))

分割線

Divider(color = MaterialTheme.colors.primaryVariant, thickness = 0.dp)

設置Padding

Text(text = name, color = MaterialTheme.colors.secondary,modifier = Modifier.padding(10.dp))

設置Style

Text(text = name, color = MaterialTheme.colors.secondary, style = typography.h3)

設置居中

Text(text = name, color = MaterialTheme.colors.secondary, modifier = Modifier.gravity(Alignment.CenterHorizontally))

設置為螢幕的高度

Column(Modifier.fillMaxHeight().padding(16.dp)) {
        for (name in names) {
            Text(text = name, color = MaterialTheme.colors.secondary)
            Divider(color = MaterialTheme.colors.primaryVariant)
        }
        Divider(color = Color.Transparent, thickness = 32.dp)
        Counter(count.value) { updateCount -> count.value = updateCount }
}

按鈕典籍事件

@Composable
fun Counter() {
    val count = remember { mutableStateOf(0) }

    Button(onClick = { count.value++ }, backgroundColor = MaterialTheme.colors.primaryVariant) {
        Text("按了${count.value}下", color = MaterialTheme.colors.secondary)
    }
}